<template>
  <div>
    <div class="right_nav">
      <div class="header">
        <p>后台首页 <i></i> <span>商品列表</span></p>
      </div>
      <div class="head">
        <ul>
          <li @click="search('all')">全部</li>
          <li @click="search('checking')">审核中</li>
          <li @click="search('saling')">出售中</li>
          <li>已下架</li>
          <li>库存预警</li>
          <li>回收站</li>
        </ul>
      </div>
      <div class="operation">
        <div class="left">
          <span>发布商品</span>
          <span>批量删除</span>
          <span @click="changeStatus(1)">上架</span>
          <span @click="changeStatus(0)">下架</span>
        </div>
        <div class="right">
          <input type="text" placeholder="要搜索的商品名称" v-model='searchVal' />
          <span @click="searchKeyWord">搜索</span>
          <span >高级搜索</span>
        </div>
      </div>

      <div class="gaojisousuo">
            商品名称<el-input v-model="input" class="inputsearchwidth"  placeholder="请输入内容"></el-input>
           
            商品分类<el-select v-model="category_id" filterable placeholder="请选择">
              <el-option
                v-for="item in cates"
                :key="item.name"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

            <el-button @click="searchInfo">搜索</el-button>
        </div>

    </div>

     <el-table
      :data="list"
      style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="35" >
        </el-table-column>

      <el-table-column
       
        label="商品"
        width="180">
          <template slot-scope="scope">
              <p style="margin-left: 10px">{{ scope.row.title }}</p>
              <p style="margin-left: 10px">{{ scope.row.category.name }}</p>
              <p style="margin-left: 10px">{{ scope.row.create_time }}</p>
          </template>
      </el-table-column>
      <el-table-column
        prop="sale_count"
        label="实际销量"
        width="80">
      </el-table-column>
      <el-table-column label="商品状态">
             <template slot-scope="scope">
             
              <span style="margin-left: 10px">{{ scope.row.status ? '上架' : '仓库' }}</span>
            </template>
      </el-table-column>
       <el-table-column label="审核状态">
         <template slot-scope="scope">
           <!-- ischeck 0:未审核  -->
             <div v-if="!scope.row.ischeck">
               <el-button size="mini" >通过</el-button>
               <el-button size="mini" >拒绝</el-button>
             </div > 
           <!-- 1:通过  2:拒绝 -->
             <div v-else>
                <span>  {{scope.row.ischeck === 1? '通过' : '拒绝'}}</span>
             </div>
         </template>
      </el-table-column>
       <el-table-column
        prop="stock"
        label="总库存"
        width="80">
      </el-table-column>
       <el-table-column
       
        label="价格"
        width="80">
          <template slot-scope="scope">
            <span>{{scope.row.min_price}}</span> <span>{{scope.row.min_oprice}}</span>
          </template>
      </el-table-column>
           <el-table-column
       
        label="操作"
        width="180">
          <template slot-scope="scope">
             <span @click="goCreate(scope.row.id)">基础设置</span> 
            <!-- <router-link tag='span' :to="'/shop/create/'+scope.row.id">基础设置</router-link> -->
            <span>商品价格</span>
            <!-- 点击路由跳转 传递一个id到 创建商品页面，之后发起接口请求 good/read/id 数据渲染到表单 -->
          </template>
      </el-table-column>

    </el-table>
    
    <footer>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.totalCount">
      </el-pagination>
    </footer>

  </div>
</template>

<script>
import { Loading } from 'element-ui';
export default {
  components:{
    Loading
  },
  data(){
    return{
      list:[],
      searchVal:'',
      loadingInstance:'',
      currentPage:1,
      page:1,
      tab:'all',
      limit:10,
      title:'',
      cates:[],
      category_id:'',  //分类id
      input:'',  // 输入框内容
      selectIds:[]
    }
  },
  methods: {
    // 请求数据  各种维度的搜索 
    getList(){
        // this.loadingInstance = Loading.service(); 
        this.axios.get('http://ceshi5.dishait.cn/admin/goods/'+this.page+'?limit='+this.limit+'&tab='+this.tab+'&title='+this.title+(this.category_id!==''?'&category_id='+this.category_id:'')).then(res=>{
        if(res.data.msg=='ok'){
          this.list=res.data.data.list
          this.cates = res.data.data.cates;
        }
        // this.loadingInstance.close();
      })

    },
    search(str){
        this.tab = str;
        this.getList();
    },
    searchKeyWord(){
         this.title = this.searchVal;
         this.getList();
    },
    changeStatus(n){
      // this.selectIds  => arr [234,234]
      var arr = [];
      this.selectIds.forEach(item => {
          arr.push(item.id)
      });
      this.axios.post('http://ceshi5.dishait.cn/admin/goods/changestatus',{
        ids:arr,status:n
      }).then(res=>{
          this.$message({
            type:'success',
            message:'修改成功'
          })
          this.getList();
          
      })
    },
    handleSizeChange(size){ // 改变每页显示 多少条数据时 会触发
      console.log(size);
    },
    handleCurrentChange(index){ // 翻页的时候 会触发
      console.log(index)
      this.page = index;
      // 翻现在显示的数据 
      this.getList();    
    },
    // 高级搜索
    searchInfo(){
      console.log(this.category_id,this.input)
      this.title = this.input;
      this.getList(); 
      // 会做 能上班   ｜｜   不会做 不能胜任

    },
    // 跳转发布商品页
    goCreate(id){
      this.$router.push({path:'/shop/create',query:{id:id}})
    },
    handleSelectionChange(val){
      // console.log(val)
      this.selectIds = val;
      
    }

  },
  mounted(){
          this.getList('all');    
              
  }
};
</script>
<style scoped>
.gaojisousuo{
  padding: 0 20px;
}
.inputsearchwidth{
  clear: both;
  width:100px;
}
li.row>span{
  display: inline-block;
  width:150px;
  text-align: center;
  border-bottom: 1px solid gainsboro;
}
.right_nav {
  width: 100%;
}
.right_nav .header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgb(223, 223, 223);
  padding: 20px;
}
.right_nav .header p {
  color: #000;
  font-weight: 700px;
  font-size: 16px;
}
.right_nav .header p span {
  font-weight: 400px;
  color: rgb(161, 161, 161);
  padding-left: 10px;
}
.right_nav .header p i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(225deg);
}
.right_nav .head {
  width: 100%;
  height: 40px;
  padding: 0 20px;
}
.right_nav .head ul {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.right_nav .head ul li {
  float: left;
  height: 100%;
  line-height: 40px;
  margin-right: 30px;
  font-size: 14px;
}
.right_nav .head ul li:hover {
  color: rgb(66, 110, 75);
}
.right_nav .operation {
  height:60px;
  padding: 0 20px;

}
.right_nav .operation .left {
  float: left;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .left span {
  padding: 5px 15px;
  border-radius: 5px;
}
.right_nav .operation .left span:nth-child(1) {
  color: #fff;
  background: rgb(121, 187, 121);
}
.right_nav .operation .left span:nth-child(2) {
  color: #fff;
  background: rgb(243, 121, 121);
}
.right_nav .operation .left span:nth-child(3) {
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .left span:nth-child(4) {
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .right {
  float: right;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .right input {
  width: 200px;
  height: 28px;
  border: 1px solid rgb(153, 153, 153);
  border-radius: 5px;
  padding-left: 20px;
  color: #ccc;
}
.right_nav .operation .right span {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .right span:nth-child(2) {
  background: rgb(163, 163, 163);
  color: #fff;
}
.right_nav .main_box {
  padding: 20px;
}
.right_nav .main_box .top_header {
  width: 100%;
  display: flex;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 60px;
}
.right_nav .main_box .top_header input {
  -webkit-appearance: checkbox;
}
.right_nav .main_box .top_header section {
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  color: rgb(98, 98, 98);
}
.right_nav .main_box .top_header section:nth-child(1) {
  width: 80px;
  line-height: 60px;
  text-align: center;
}
.right_nav .main_box .top_header section:nth-child(2) {
  width: 420px;
  line-height: 60px;
  padding: 0 30px;
  padding-left: 20px;
}
.right_nav .main_box .top_header section:nth-child(3) {
  width: 150px;
  text-align: center;
  /* padding: 10px 5px; */
}
.right_nav .main_box .top_header section:nth-child(4) {
  width: 120px;
  text-align: center;
  /* padding: 10px 5px; */
}
.right_nav .main_box .top_header section:nth-child(5) {
  width: 200px;
  text-align: center;
  line-height: 60px;
  padding: 0 30px;
}
.right_nav .main_box .top_header section:nth-child(6) {
  width: 170px;
  text-align: center;
  line-height: 60px;
  padding: 0 30px;
}
.right_nav .main_box .top_header section:nth-child(7) {
  width: 211px;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
.right_nav .main_box .top_header section:nth-child(8) {
  width: 100%;
  text-align: center;
  line-height: 60px;
  border: none;
}
.right_nav .main_box li {
  width: 100%;

  display: flex;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 100px;
}
.right_nav .main_box li input {
  -webkit-appearance: checkbox;
  line-height: 100px;
}
.right_nav .main_box li section {
  border-right: 1px solid #ccc;
  height: 100px;
  box-sizing: border-box;
}
.right_nav .main_box li section:nth-child(1) {
  width: 80px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.right_nav .main_box li section:nth-child(2) {
  width: 450px;
  line-height: 100px;
  padding: 10px;
}
.right_nav .main_box li section:nth-child(2) .box {
  width: 60px;
  height: 60px;
  background: green;
  display: inline-block;
}
.right_nav .main_box li section:nth-child(2) .r_box {
  display: inline-block;
}
.right_nav .main_box li section:nth-child(2) .r_box p {
  height: 16px;
  width: 100%;
  line-height: 0;
  font-size: 12px;
}

.right_nav .main_box li section:nth-child(3) {
  width: 150px;
  text-align: center;
  padding: 30px 30px;
}
.right_nav .main_box li section:nth-child(4) {
  width: 120px;
  text-align: center;
  padding: 30px 20px;
}
.right_nav .main_box li section:nth-child(4) span {
  border-radius: 5px;
  background: red;
  color: #fff;
  padding: 0 5px;
  font-size: 14px;
}
.right_nav .main_box li section:nth-child(5) {
  width: 200px;
  text-align: center;
  line-height: 100px;
  padding: 0 30px;
}
.right_nav .main_box li section:nth-child(6) {
  width: 170px;
  text-align: center;
  line-height: 100px;
  padding: 0 30px;
}
.right_nav .main_box li section:nth-child(7) {
  width: 200px;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(7) span {
  color: red;
}
.right_nav .main_box li section:nth-child(8) {
  width: 100%;
  text-align: center;
  line-height: 100px;
  border: none;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(8) span {
  color: red;
  padding: 10px;
}
.right_nav .main_box li section:nth-child(8) span:nth-child(2) {
  color: green;
}
.right_nav .main_box li section:nth-child(8) span:nth-child(3) {
  color: green;
}
.right_nav .main_box li section:nth-child(8) span:nth-child(4) {
  color: green;
}
.right_nav .main_box li section:nth-child(8) span:nth-child(5) {
  color: green;
}
footer {
  position: fixed;
  background: #fff;
  margin-left: 20%;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(192, 192, 192);
  padding-top: 20px;
}
footer span {
  padding: 5px 10px;
  border-radius: 5px;
}
footer span:nth-child(2) {
  border: 1px solid #ccc;
}
footer span:nth-child(4) {
  color: rgb(27, 68, 41);
  font-weight: 700;
}
footer span:nth-child(7) {
  border: 1px solid #ccc;
}
</style>